<template>
    <div class="RankingListContainer">
        <div class="RankingListRecNav">
            <h2 class="title">排行榜</h2>
            <!-- <a href="/rankList" class="more flex_c" data-v-797b71df
            ><span data-v-797b71df>更多></span-->
            <router-link to="/ranking" class="toRankingList">更多></router-link>
        </div>
        <div class="recList">
            <div class="bang" v-for="item in rankList" :key="item.id">
                <div class="bangTop">
                    <div class="topBg">
                        <img :src="item.coverImgUrl" alt class="imgTip" />
                    </div>
                    <img
                        src="https://img3.kuwo.cn/star/albumcover/500/4/94/2309969825.jpg"
                        alt
                        class="bangBg"
                    />
                    <span class="iconPlay">
                        <i class="iconfont icon-icon_play_1"></i>
                    </span>
                </div>
                <ul class="listCon">
                    <li v-for="(song, sub) in item.list" :key="sub">
                        <div class="topImg top1">{{ sub + 1 }}</div>
                        <!---->
                        <div class="info">
                            <p class="songName">{{ song.name }}</p>
                            <p class="artist">{{ item.ar }}</p>
                        </div>
                    </li>

                    <!---->
                    <!---->
                    <!---->
                </ul>
            </div>
        </div>
    </div>
</template>

<script>
import { reqGetTopList } from "../../../../../api/home";
import { reqGetPlayListDetail } from "../../../../../api/home";

export default {
    name: "RankingList",
    data() {
        return {
            //排行榜
            topList: [],
            // 用于展示用户排行榜区域数据
            rankList: [],
        };
    },
    async mounted() {
        let topList = await reqGetTopList();
        topList = topList.list.splice(0, 5).map((item) => {
            return {
                coverImgUrl: item.coverImgUrl,
                id: item.id,
            };
        });
        this.topList = topList;
        let allTopList = [];
        const rankList = [];
        let index = 0;
        while (index < topList.length) {
            let topListData = await reqGetPlayListDetail(topList[index].id);

            allTopList.push(topListData.playlist.tracks);
            const obj = {
                coverImgUrl: topListData.playlist.coverImgUrl,
                id: topListData.playlist.id,
                list: topListData.playlist.tracks.slice(0, 5).map(function (item) {
                    return item.al;
                }),
                ar: topListData.playlist.tracks[index].ar[0].name,
            };
            index++;
            rankList.push(obj);
            this.rankList = rankList;
        }
    },
};
</script>

<style scoped>
.RankingListRecNav {
    display: flex;
    align-items: baseline;
    height: 40px;
    line-height: 40px;
    margin: 60px 0 24px;
}
.RankingListRecNav .title {
    margin-right: 40px;
}
.toRankingList {
    text-decoration: none;
    color: black;
    font-size: 14px;
    /* transform: translateY(px); */
}
.RankingListContainer .recList {
    display: flex;
    justify-content: space-between;
}
.recList .bang {
    width: 18.85%;
    box-shadow: 0 0 30px 0 rgb(65 67 70 / 8%);
}
.bangTop {
    height: 0;
    position: relative;
    padding-bottom: 54.8%;
    overflow: hidden;
}
.topBg {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0;
    top: 0;
    background: rgba(46, 32, 60, 0.7);
    z-index: 10;
}
.bangBg {
    position: absolute;
    top: 50%;
    left: 0;
    width: 100%;
    transform: translateY(-50%);
}
.imgTip {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 54.3%;
    z-index: 10;
    opacity: 0.5;
    border-radius: 50%;
}
.bangTop .iconPlay {
    position: absolute;
    right: 12px;
    bottom: 12px;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background: #fff;
    border-radius: 50%;
    display: none;
    z-index: 15;
    cursor: pointer;
}
.listCon {
    padding: 28px 20px 26px;
}
.listCon li {
    list-style: none;
    display: flex;
    justify-content: space-between;
}
.listCon .topImg {
    width: 20px;
    height: 33px;
}
.listCon .info {
    width: 85%;
    padding-left: 10px;
}
.listCon .info p {
    margin: 0;
}
.listCon .info .songName {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 16px;
    font-weight: 400;
    height: 22px;
    line-height: 22px;
    cursor: pointer;
}
.listCon .info .artist {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 4px;
    font-size: 14px;
    font-weight: 300;
    color: #999;
    height: 20px;
    line-height: 20px;
    cursor: pointer;
    text-align: left;
}
.listCon li + li {
    margin-top: 23px;
}
</style>
